<template>
  <view class="zai-box">
    <scroll-view scroll-y class="page">
      <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
        <image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode='aspectFit'
               class="zai-logo "></image>
        <view class="zai-title text-shadow ">通学宝典</view>
      </view>
      <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
        <block v-if="loginWay==1">
          <view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
            <view class="title">
              <text class="cuIcon-people margin-right-xs"></text>
              账号:
            </view>
            <input placeholder="请输入账号" name="input" v-model="userName"></input>
          </view>
          <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
            <view class="title">
              <text class="cuIcon-lock margin-right-xs"></text>
              密码:
            </view>
            <input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password"/>
            <view class="action text-lg">
              <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
                    @click="changePassword"></text>
            </view>
          </view>
          <view class="padding text-center margin-top">
            <button class="cu-btn bg-blue lg margin-right shadow" :loading="loading"
                    :class="[shape=='round'?'round':'']"
                    @tap="onLogin">
              <text space="emsp">{{ loading ? "登录中..." : " 登录 " }}</text>
            </button>
            <view class="margin-top">
              <button class="cu-btn line-blue lg margin-left shadow" :loading="loading"
                      :class="[shape=='round'?'round':'']"
                      @tap="loginWay=2">微信登录
              </button>
              <button class="cu-btn line-blue lg margin-left shadow" :loading="loading"
                      :class="[shape=='round'?'round':'']"
                      @tap="loginWay=3">短信登录
              </button>
            </view>
          </view>
        </block>
        <block v-else-if="loginWay == 2">
          <button open-type="getPhoneNumber" @getphonenumber="txGetPhoneNumber" v-show="!logged" class="log-btn wechat" type="primary">
<!--            <button class="log-btn wechat" type="primary" @click="onWxLogin">-->
            <uni-icons color="#ffffff" style="margin:10rpx;" type="weixin"></uni-icons>
            手机号快捷登录
          </button>
<!--          <button class="log-btn wechat avatar-wrapper" open-type="chooseAvatar" :chooseavatar="onChooseAvatar" type="primary">
            <uni-icons color="#ffffff" style="margin:10rpx;" type="weixin"></uni-icons>
            使用微信授权登录
          </button>
          <input type="nickname" class="weiui-input" placeholder="请输入昵称"/>-->
          <button style="width: fit-content;margin-top: 15px;" class="log-btn wechat" @click="toIndex">
            进入主页
          </button>
          <view class="margin-top" v-if="false">
            <button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                    @tap="loginWay=1">账户登录
            </button>
            <button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                    @tap="loginWay=3">短信登录
            </button>
          </view>
        </block>
        <block v-else-if="loginWay == 3">
          <view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
            <view class="title">
              <text class="cuIcon-mobile margin-right-xs"></text>
              手机号:
            </view>
            <input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
          </view>
          <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
            <view class="title">
              <text class="cuIcon-lock margin-right-xs"></text>
              验证码:
            </view>
            <input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
            <view class="action">
              <button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{
                  getSendBtnText
                }}
              </button>
            </view>
          </view>
          <view class="padding text-center margin-top">
            <button class="cu-btn bg-blue lg margin-right shadow" :loading="loading"
                    :class="[shape=='round'?'round':'']"
                    @tap="onSMSLogin">
              <text space="emsp">{{ loading ? "登录中..." : " 登录 " }}</text>
            </button>
            <view class="margin-top">
              <button class="cu-btn line-blue lg margin-left shadow" :loading="loading"
                      :class="[shape=='round'?'round':'']"
                      @tap="loginWay=1">账户登录
              </button>
              <button class="cu-btn line-blue lg margin-left shadow" :loading="loading"
                      :class="[shape=='round'?'round':'']"
                      @tap="loginWay=2">微信登录
              </button>
            </view>
          </view>
        </block>

        <view class="mask" v-if="showModal">
          <view class="waringBox">
            <template>
              <view class="title">温馨提示</view>
              <view class="content">需要获取您的绑定手机信息</view>
              <view class="btnBox">
                <button type="primary" class="btn" style="color: #666;" @click="cancel">取消</button>
                <button type="primary" class="btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
                        style="color: #31AFFF;">确定
                </button>
              </view>
            </template>
          </view>
        </view>

        <!-- #ifdef APP-PLUS -->
        <view class="padding flex flex-direction  text-center">
          当前版本:{{ version }}
        </view>
        <!-- #endif -->

      </view>
    </scroll-view>
    <!-- 登录加载弹窗 -->
    <view class="cu-load load-modal" v-if="loading">
      <!-- <view class="cuIcon-emojifill text-orange"></view> -->
      <image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" class="round"></image>
      <view class="gray-text">登录中...</view>
    </view>
  </view>

</template>

<script>
import {ACCESS_TOKEN, USER_NAME, USER_INFO} from "@/common/util/constants"
import {mapActions, mapGetters} from "vuex"
import configService from '@/common/service/config.service.js';
import {getWxUserInfo} from "../../common/luch-request/wxLogin";

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

export default {
  data() {
    return {
      shape: '',//round 圆形
      loading: false,
      userName: 'admin',
      password: '123456',
      phoneNo: '',
      smsCode: '',
      showPassword: false, //是否显示明文
      loginWay: 2, //1: 账密，2：验证码
      smsCountDown: 0,
      smsCountInterval: null,
      toggleDelay: false,
      version: '',
      //第三方登录相关信息
      thirdType: "",
      thirdLoginInfo: "",
      thirdLoginState: false,
      bindingPhoneModal: false,
      thirdUserUuid: '',
      url: {
        bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
      },
      showModal: false,
      avatarUrl: defaultAvatarUrl,
    };
  },
  onLoad: function () {
    // #ifdef APP-PLUS
    var that = this
    plus.runtime.getProperty(plus.runtime.appid, function (wgtinfo) {
      that.version = wgtinfo.version
    });
    // #endif
  },
  computed: {
    onChooseAvatar(e) {
      this.avatarUrl = e.detail
    },
    ...mapGetters(['userInfo']),
    isSendSMSEnable() {
      return this.smsCountDown <= 0 && this.phoneNo.length > 4;
    },
    getSendBtnText() {
      if (this.smsCountDown > 0) {
        return this.smsCountDown + '秒后发送';
      } else {
        return '发送验证码';
      }
    },
    canSMSLogin() {
      return this.userName.length > 4 && this.smsCode.length > 4;
    },
    canPwdLogin() {
      return this.userName.length > 4 && this.password.length > 4;
    },
  },
  methods: {
    txGetPhoneNumber(e) {
      console.log(e)
      let {detail} = e;
      if (detail && (detail.errMsg == 'getPhoneNumber:ok')) {
        let {code} = detail;
        this.onWxLogin(code)
      }
    },
    toIndex() {
      this.$Router.replaceAll({name: 'index'})
    },
    ...mapActions(["mLogin", "PhoneLogin", "ThirdLogin", "wxLogin"]),
    onWxLogin: function (code) {
      // event 获取微信手机号参数
      uni.showToast({
        title: '正在登录',
        duration: 500
      });
      getWxUserInfo().then(jsCode => {
        let wxInfo = this.$store.state.user.wxInfo || {}
        console.log(wxInfo)
        this.loading = true;
        // uni.showLoading({title: '加载中'})
        this.wxLogin({
          code,
          userInfo: wxInfo,
          ...wxInfo,
          sex: wxInfo.gender == 0 ? 1 : 2,
          username: wxInfo.nickName,
          realname: wxInfo.nickName,
          jsCode,
          password: 'admin@123'
        }).then(res => {
          const {result: data} = res.data;
          console.log(data)
          if (data.sysUser.hasOwnProperty('phone')) {
            if (data.userType) {
              uni.showModal({
                content: '暂无权限，请联系管理人员。',
                confirmText: '确定',
                showCancel: false,
                success: (r) => {
                }
              });
            } else {
              //有权限可以直接登录
              // this.$store.commit('user/set_userInfo', {...data.sysUser});
              // this.$store.dispatch('user/set_userInfo', {...data.sysUser, token: data.token})
              console.log(this.userInfo)
              // this.$_jumpTo(data.userType)
              // #ifdef APP-PLUS
              this.saveClientId()
              // #endif
              // #ifndef APP-PLUS
              this.$tip.success('登录成功!')
              this.$Router.replaceAll({name: 'index'})
              // #endif
            }
          } else {
            //需要获取手机号
            this.getPhoneQuery = res.data
            // StorageToken.set(data.token)
            this.showModal = true
          }
        }).finally(() => {
          // uni.hideLoading()
          this.loading = false;
        })
      }).catch(err => {
        console.log(err)
      })
    },
    onLogin: function () {
      if (!this.userName || this.userName.length == 0) {
        this.$tip.toast('请填写用户名');
        return;
      }
      if (!this.password || this.password.length == 0) {
        this.$tip.toast('请填写密码');
        return;
      }
      let loginParams = {
        username: this.userName,
        password: this.password
      }
      this.loading = true;
      this.mLogin(loginParams).then((res) => {
        this.loading = false;
        if (res.data.success) {
          // #ifdef APP-PLUS
          this.saveClientId()
          // #endif
          // #ifndef APP-PLUS
          this.$tip.success('登录成功!')
          this.$Router.replaceAll({name: 'index'})
          // #endif
        } else {
          this.$tip.alert(res.data.message);
        }
      }).catch((err) => {
        let msg = err.data.message || "请求出现错误，请稍后再试"
        this.loading = false;
        this.$tip.alert(msg);
      }).finally(() => {
        this.loading = false;
      })
    },
    saveClientId() {
      var info = plus.push.getClientInfo();
      var cid = info.clientid;
      this.$http.get("/sys/user/saveClientId", {params: {clientId: cid}}).then(res => {
        console.log("res::saveClientId>", res)
        this.$tip.success('登录成功!')
        this.$Router.replaceAll({name: 'index'})
      })
    },
    changePassword() {
      this.showPassword = !this.showPassword;
    },
    onSMSSend() {
      let smsParams = {};
      smsParams.mobile = this.phoneNo;
      smsParams.smsmode = "0";
      let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
      if (!smsParams.mobile || smsParams.mobile.length == 0) {
        this.$tip.toast('请输入手机号');
        return false
      }
      if (!checkPhone.test(smsParams.mobile)) {
        this.$tip.toast('请输入正确的手机号');
        return false
      }
      this.$http.post("/sys/sms", smsParams).then(res => {
        if (res.data.success) {
          this.smsCountDown = 60;
          this.startSMSTimer();
        } else {
          this.smsCountDown = 0;
          this.$tip.toast(res.data.message);
        }
      });
    },
    startSMSTimer() {
      this.smsCountInterval = setInterval(() => {
        this.smsCountDown--;
        if (this.smsCountDown <= 0) {
          clearInterval(this.smsCountInterval);
        }
      }, 1000);
    },
    onSMSLogin() {
      let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

      if (!this.phoneNo || this.phoneNo.length == 0) {
        this.$tip.toast('请填写手机号');
        return;
      }
      if (!checkPhone.test(this.phoneNo)) {
        this.$tip.toast('请输入正确的手机号');
        return false
      }
      if (!this.smsCode || this.smsCode.length == 0) {
        this.$tip.toast('请填短信验证码');
        return;
      }
      let loginParams = {
        mobile: this.phoneNo,
        captcha: this.smsCode
      };
      this.PhoneLogin(loginParams).then((res) => {
        console.log("res====》", res)
        if (res.data.success) {
          this.$tip.success('登录成功!')
          this.$Router.replaceAll({name: 'index'})
        } else {
          this.$tip.error(res.data.message);
        }
      }).catch((err) => {
        let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
        this.$tip.error(msg);
      });
    },
    loginSuccess() {
      // 登陆成功，重定向到主页
      this.$Router.replace({name: 'index'})
    },
    requestFailed(err) {
      this.$message.warning("登录失败")
    },
  },
  beforeDestroy() {
    if (this.smsCountInterval) {
      clearInterval(this.smsCountInterval);
    }
  },
}
</script>

<style>
.login-paddingtop {
  padding-top: 100upx;
}

.zai-box {
  padding: 0 20upx;
  padding-top: 100upx;
  position: relative;
}

.zai-logo {
  width: 200upx;
  height: 150px;
}

.zai-title {
  font-size: 58upx;
  color: #000000;
  text-align: center;
}

.input-placeholder, .zai-input {
  color: #94afce;
}

.zai-label {
  padding: 60upx 0;
  text-align: center;
  font-size: 30upx;
  color: #a7b6d0;
}

.zai-btn {
  background: #ff65a3;
  color: #fff;
  border: 0;
  border-radius: 100upx;
  font-size: 36upx;
}

.zai-btn:after {
  border: 0;
}

/*按钮点击效果*/
.zai-btn.button-hover {
  transform: translate(1upx, 1upx);
}

</style>
